<template>
	<div class="carry" :style="{height: carryHeight + 'px'}">
        <div class="form">
            <div class="createEWM" @click="openDialog"></div>
            <img src="../assets/img/yijijiangli.png" class="prize">
            <img src="../assets/img/erjijiangli.png" class="prize">
            <img src="../assets/img/sanjijiangli.png" class="prize">
            <h5>奖励说明：</h5>
            <p>您邀请20位用户，这些用户各自再邀请20位用户成为您的二级用户，二级用户再各自邀请20位用户成为您的三级用户，每人进行10局10元赢红包游戏。</p>
            <p class="crowed">(20*10*10*8%+20*10*10*5%+20*20*20*10*10*3%=26160)</p>
        </div>
        <div class="mask" v-show="mask" @click="changeState">
    	    <vue-q-art  class="vueArt" :config="config" v-show="qrcode"></vue-q-art>
        </div>
		<bottom-nav act="daili"></bottom-nav>
	</div>
</template> 

<script>
	import { MessageBox } from 'mint-ui'
	import bottomNav from './bottomNav'
	import $ from 'jquery'
	import VueQArt from 'vue-qart'

	export default {
		name: 'carry',
		data () {
			return {
		        carryHeight: 0,
		        config: {
		            value: 'https://www.baidu.com',
		            imagePath: require('../assets/img/myMoneyBg.png'),
		            filter: 'color'
		        },
		        qrcode:false,
		        mask:false
			}
		},
		mounted () {

		},
		created() {
            this.init();
		},
		methods: {
			init () {
				this.carryHeight = (document.documentElement.clientHeight - document.documentElement.clientHeight/750*4.9*10);			
			},
			changeState (){
				this.mask  = !this.mask
			},
			openDialog() {
			var that = this;
			this.axios({
				method:"post",
				url: "http://xyydj.daoapp.io/mobile/qrcode",
				data: {
					"openid":"obj8zs1IdUy8DE6a8j0C1eiQIQUQ",
					"memberid":1021,
				}
			}).then(function(res){
				console.log(res.data)
				that.config.value =  res.data.qrcode
				that.qrcode = true
				that.mask = true
			})
		


				// MessageBox({
				// 	message: 'ss',// 	title: '',
				// 	dialogClass: 'page17Dialog',
				// 	confirmButtonText: '',
				// 	cancelButtonText: ''
				// });

			}
		},
		components: {VueQArt,bottomNav}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mask{
	width: 100%;height: 100% ;position: fixed;top: 0;left: 0;text-align: center;display: table;
	background: rgba(0,0,0,0.5);
}
.mask div{
	widows: 100%;    vertical-align: middle;
	height: 100%;    display: table-cell; 
	margin: auto;
}
.carry{padding-top: 19rem;background: url(../assets/img/bg3Top.png) top center no-repeat, url(../assets/img/bg1Bottom.jpg) bottom center no-repeat;background-size: 100% auto;width: 100%;box-sizing: border-box;}
.form{margin: 0 auto;padding: 2rem 1.5rem;width: 33.4rem;border: 4px solid #fbcd91;border-radius: 12px;background: #fff;box-sizing: border-box;}
.form .createEWM{margin: 0 auto;background: url(../assets/img/createBtn.png) center no-repeat;background-size: 20.75rem auto;width: 20.75rem;height: 4.25rem;}
.form .prize{display: block;margin: 1.8rem auto;width: 12.5rem;height: 1.8rem;}
.form h5{font-size: 1.6rem;color: #fdb04b;line-height: 2;}
.form p{font-size: 1.2rem;color: #fdb04b;line-height: 2;}
.form p.crowed{text-align: center;letter-spacing: -0.5px;}
</style>
